<template>
  <div>
    <el-dialog
      title="工单详情"
      :visible="dialog"
      width="30%"
      @close="close"
    >
      <div class="header">
        <img
          v-if="status.taskStatus===3"
          src="@/assets/CKXQ/QX.png"
          alt=""
        />
        <img
          v-else-if="status.taskStatus===4"
          src="@/assets/CKXQ/WC.png"
          alt=""
        />
        <img
          v-else-if="status.taskStatus===1"
          src="@/assets/CKXQ/DB.png"
          alt=""
        />
        <div v-if="status.taskStatusTypeEntity" class="size">{{ status.taskStatusTypeEntity.statusName }}</div>
        <img
          v-if="status.taskStatus===3"
          src="@/assets/CKXQ/QX1.png"
          alt=""
        />
        <img
          v-else-if="status.taskStatus===4"
          src="@/assets/CKXQ/WC1.png"
          alt=""
        />
        <img
          v-else-if="status.taskStatus===1"
          src="@/assets/CKXQ/DB1.png"
          alt=""
        />
      </div>
      <el-row class="grid-content" :gutter="10" type="flex">
        <el-col :span="12">设备编号:  {{ status.innerCode }}</el-col>
        <el-col :span="12">创建日期   {{ status.createTime }}</el-col>
      </el-row>
      <el-row class="grid-content" :gutter="10" type="flex">
        <el-col :span="12">运营人员   {{ status.userName }}</el-col>
        <el-col v-if="status.taskType" :span="12">工单类型:{{ status.taskType.typeName }}</el-col>
      </el-row>
      <el-row class="grid-content" :gutter="10" type="flex">
        <el-col :span="12">补货数量:    <el-button type="text" @click="openFn">补货详情</el-button></el-col>
        <el-col :span="12">工单方式:    {{ status.createType===1?'手动':'自动' }}</el-col>

      </el-row>
      <el-row class="grid-content" :gutter="10" type="flex">
        <el-col v-if="status.taskStatus===4" :span="12">完成日期:    {{ status.updateTime }}</el-col>
        <el-col v-else :span="12">创建日期:    {{ status.updateTime }}</el-col>

        <el-col v-if="status.taskStatus===3" :span="12">取消原因:    {{ status.desc }}</el-col>
        <el-col v-else :span="12">备注:    {{ status.desc }}</el-col>

      </el-row>

      <span slot="footer" class="dialog-footer">
        <el-button v-if="status.taskStatus===3" class="btn2" @click="create">重新创建</el-button>
        <el-button v-else-if="status.taskStatus===1" class="btn2" @click="del">取消工单</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="补货详情"
      :visible="dialogVisible"
      width="width"
      @close="fn"
    >

      <el-table
        :data="list"
        highlight-current-row
        height="300px"
        :header-cell-style="{ background:'rgb(243, 246, 251)', color: 'rgb(102, 102, 102)','font-weight':'500'}"
      >
        <el-table-column
          label="货道编号"
          prop="channelCode"
        />
        <el-table-column
          label="商品名称"
          prop="skuName"
        />
        <el-table-column
          label="补货数量"
          prop="expectCapacity"
        />
      </el-table>

    </el-dialog>
  </div>
</template>
<script>
import { getTaskDetails } from '@/api'
export default {
  components: {},
  props: {
    dialog: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    // 取消代办
    status: {
      type: Object,
      default: () => {}
    }

  },
  data() {
    return {
      dialogVisible: false,
      list: []

    }
  },

  methods: {
    async openFn() {
      this.dialogVisible = true
      const { data } = await getTaskDetails(this.status.taskId)
      this.list = data
      console.log(data)
    },
    fn() {
      this.dialogVisible = false
    },
    close() {
      this.$emit('close')
    },
    create() {
      console.log(this.status.innerCode)
      this.$emit('create', this.status.innerCode)
    },
    del() {
      this.$emit('del')
    }
  }
}
</script>
<style lang='scss' scoped>

.grid-content{
  height: 36px;
  line-height: 36px;
}
.size{
  margin-left: 16px;
  margin-right: 350px;
}
::v-deep .el-dialog .el-dialog__body
{
  padding: 20px 20px 30px;
  color: #666;
    }
.header{
  display: flex;
  align-items: center;
  height: 54px;
  margin-bottom: 25px;
  background-color: hsla(0,0%,92.5%,.39);
  align-items: center;
}
.button{
  display: flex;
}
::v-deep .el-dialog__title{
  color: #333 ;
  font-size: 16px;
  font-weight: 600;
}
 ::v-deep .el-dialog,::v-deep .el-dialog__header{
  background: #fff !important;
  border-radius: 10px !important;
  width: 630px !important;
}
::v-deep .el-dialog__header .el-icon-close:before{
  color: #333;
}
::v-deep .el-dialog__footer{
  text-align: center;
}
  .btn2{
      justify-content: center;
      align-items: center;
      width: 80px !important;
      height: 36px;
      padding: 0;
      background-color: #fbf4f0;
      border: none;
      color: #655b56 !important;

    }
    .btn2:hover {
      background-color: #f3e7e1;
    }

</style>
